<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4：v-model双向绑定</title>
     <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app" >
        <h1>知识点1：v-model双向绑定</h1>
        <h3>我们可以使用v-model指令在表单input，textarea，select等元素进行双向绑定
            他会根据控件的类型自动获取正确的方法来更新元素，
            v-model会忽略所有表单元素的value，checked，selected等属性的初始值
            他会始终将当前的javascript状态视为数据的正确来源
        </h3>
        <h3>1.单行文本框</h3>
        用户名：<input type="text" v-model="singleText">
        输入的用户名是：{{singleText}}
        <h3>2.多行文本框</h3>
        个人简介：<textarea name="" id="" v-model="multiText"></textarea>
        输入的个人简介是：{{multiText}}
        <h3>3.单选框</h3>
        <h4>单选框在实际中不能单独使用的，一般是两个以上，要设置一个v-model统一的变量，
            这样就可以实现radiogroup的效果</h4>
            性别：<input type="radio" value="M" v-model="radioValue">美女
            <input type="radio" value="F"v-model="radioValue">帅哥<br>
            输入的性别是：{{radioValue}}
            <h3>4.单个复选框：常用true或false的选择</h3>
            <input type="checkbox" v-model="toggleValue">是否漂亮
            <br>
            选择的结果是：{{toggleValue}}
            <h3>5.多个复选框：使用v-model接受数组类型的变量</h3>
            <input type="checkbox" value="漂亮" v-model="checkedValues">回眸一笑百媚生
            <input type="checkbox" value="纤细" v-model="checkedValues">体轻能为掌上舞
            <input type="checkbox" value="侠义" v-model="checkedValues">路见不平一声吼
            <br>
            你选中的品质是：{{checkedValues.join('')}}
    </div>
    
</body>
</html>
<script>
    const connApp=Vue.createApp({
        data() {
            return {
                singleText:'我是初始值',
                multiText:'' ,
                radioValue:'',
                toggleValue:false,
                checkedValues:[]
            

            }
        },

    }).mount("#app")
</script>